<template>
  <!-- 数据上传弹窗 -->
  <div>
    <el-dialog
      v-model="props.isShowDoalog"
      width="500"
      :before-close="handleClose"
      close-on-click-modal
      align-center
      @close="addCloseDialog"
      :show-close="false"
    >
      <template #header>
        <div class="ExcenDialog_headerBox">
          <div class="headerBox_left">
            <div class="left_icon"></div>
            <div>数据上传</div>
          </div>
          <div class="headerBox_right">
            <div class="left_icon"></div>
            <div class="wenzi" @click="addDaochu">下载模板</div>
          </div>
        </div>
      </template>
      <div class="ExcenDialog_contentBox">
        <el-upload
          class="upload-demo"
          drag
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
          :show-file-list="true"
          :auto-upload="false"
          :on-change="handleUpLoad"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            将Excel文件拖到此处 <em>或点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              支持Excel格式文件,最大存储量为100MB
            </div>
          </template>
        </el-upload>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addCloseDialog">取消</el-button>
          <el-button type="primary" @click="addQueren(eventvalue)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue"
import { ElMessageBox, ElMessage } from "element-plus"
import { UploadFilled } from "@element-plus/icons-vue"
import { exportAwaitProjectListExcelAPI } from "@/api/Excel.js"
import axios from "axios"
const props = defineProps({
  isShowDoalog: {
    type: Boolean,
    required: true // 标记为必传
  }
})
const emit = defineEmits(["closeDialog"])
const addCloseDialog = () => {
  emit("closeDialog", false)
}
// 导出
const addDaochu = async () => {
  const IsShowElMessageBox = await ElMessageBox.confirm(
    "是否确认导出Excel表格",
    {
      confirmButtonText: "导出",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).catch((err) => err)
  if (IsShowElMessageBox !== "confirm") return
  const res = await exportAwaitProjectListExcelAPI()
  console.log(res)

  let content = res // 文件流
  let blob = new Blob([content], { type: "application/octet-stream" })
  console.log(blob)
  let fileName = "待规划项目清单.xls"
  if ("download" in document.createElement("a")) {
    // 非IE下载
    let link = document.createElement("a")
    link.download = fileName
    link.style.display = "none"
    link.href = URL.createObjectURL(blob)
    document.body.appendChild(link)
    link.click()
    URL.revokeObjectURL(link.href) // 释放URL 对象
    document.body.removeChild(link)
  } else {
    console.log(1223123123)

    // IE10+下载
    navigator.msSaveBlob(blob.type, fileName)
  }
}

// 导入数据
const postInValuecardExcelAPI = (url, params) => {
  return axios({
    method: "post",
    url: url,
    data: params,
    headers: {
      "Content-Type": "multipart/form-data"
    }
  })
}
const eventvalue = ref()
// 导入Excel
const handleUpLoad = (ev) => {
  // console.log(ev)
  eventvalue.value = ev
}
const addQueren = async (ev) => {
  let file = ev.raw
  if (!ev?.raw) {
    ElMessage.error("未选择文件")
    return
  }
  const extension = file.name.substring(file.name.lastIndexOf(".") + 1)
  const fileType = ["xlsx", "xls"].some((item) => item === extension)
  if (!fileType) {
    ElMessage.error("文件类型无效。请上载Excel文件（.xlsx或.xls）")
    return
  }
  var formData = new FormData()
  formData.append("file", ev.raw)
  for (let [a, b] of formData.entries()) {
    console.log(a, b)
  }
  await postInValuecardExcelAPI(
    `${window.streamingConfig.Baseurl}/upload/uploadAwaitProjectData`,
    formData
  ).then((res) => {
    console.log(res.data.msg)
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg)
      // addCloseDialog()
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}
</script>
<style scoped lang="less">
.ExcenDialog_headerBox {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  .headerBox_left {
    width: 30%;
    height: 60px;
    // background-color: red;
    display: flex;
    align-items: center;
    .left_icon {
      width: 22px;
      height: 22px;
      background: url("@/assets/Menu/ICON-SJSC.svg") no-repeat center;
      background-size: 100% 100%;
      margin-right: 15px;
    }
  }
  .headerBox_right {
    width: 30%;
    height: 60px;
    // background-color: red;
    display: flex;
    justify-content: flex-end; /* 水平方向靠右对齐 */
    align-items: center;
    .left_icon {
      cursor: pointer;
      width: 18px;
      height: 18px;
      background: url("@/assets/Menu/AN-XZSJ.svg") no-repeat center;
      background-size: 100% 100%;
      margin-right: 0px;
    }
    .wenzi {
      cursor: pointer;
      font-size: 16px;
      color: rgba(88, 155, 197);
    }
  }
}
.ExcenDialog_contentBox {
  width: 100%;
  height: 210px;
}
</style>
